﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    .content .floor .mc .main{float:left;width:899px;height:600px;border-right:1px solid #ededed;border-bottom:1px solid #ededed;overflow: hidden;}
    .content .floor .mc .mains {
        float: left;
        width:100%;
        height: 600px;
        border-right: 1px solid #ededed;
        border-bottom: 1px solid #ededed;
        overflow: hidden;
    }
    .content .floor .mc .mains ul{display: none;margin-right: -3px;}.content .floor .mc .mains ul.list{display: list-item;}
        .content .floor .mc .mains ul li {
            width: 300px;
            height: 300px;
            float: left;
          
            border-right: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
            overflow: hidden;
        }
          .content .floor .mc .mains ul li p{
           
            padding:5px 5px;
          
        }
            .content .floor .mc .main ul li p{
           
            padding:5px 5px;
          
        }
.content .floor .mc .main ul{display: none;margin-right: -3px;}.content .floor .mc .main ul.list{display: list-item;}
.content .floor .mc .main ul li{width:300px;height:300px;float: left;border-right:1px solid #ededed;border-bottom:1px solid #ededed;overflow: hidden;}
#f1,#f2 {
height:600px;
overflow:hidden;
}
</style>
<div class="nav clear">
    <div class="category clear">

        <div class="banner fl">
            <div class="flex">
                <ul class="slider">
                    <li>
                        <img src="~/images/轮播3.jpg"></li>
                    <li>
                        <img src="~/images/新书速递.jpg" height="411"></li>
                    <li>
                        <img src="~/images/新书抢先看.jpg" height="411"></li>
                    <li>
                        <img src="~/images/中小学教辅.jpg" height="411"></li>
                    <li>
                        <img src="~/images/弘扬中国文化.jpg" height="411"></li>
                </ul>
                <ul class="btn">
                    <li class="prev"></li>
                    <li class="next"></li>
                </ul>
                <ol class="dot">
                    <li class="cur"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>

            </div>
        </div>
        <div class="entrance fl">
            <div class="enter">
                <a href=""><i class="epngfix x1"></i>会员登录</a>
                <a href=""><i class="epngfix x2"></i>免费注册</a>
                <a href=""><i class="epngfix x3"></i>商家开店</a>
            </div>
            <div class="enews">
                <dl class="nlist">
                    <dt>最新动态<a href="" class="more fr">更多></a></dt>
                    <dd class="pt5"><span>[特惠]</span><a href="" class="pl5">文艺独家书，低至5折</a></dd>
                    <dd><span>[特惠]</span><a href="" class="pl5">当当出版独家好书，每满100减40</a></dd>
                    <dd><span>[公告]</span><a href="" class="pl5">中小学教辅，每满100减50</a></dd>
                    <dd><span>[特惠]</span><a href="" class="pl5">十万个为什么，全套降价</a></dd>
                    <dd><span>[公告]</span><a href="" class="pl5">精品生活，2.9折封顶</a></dd>
                    <dd><span>[特惠]</span><a href="" class="pl5">文艺精选，低至5元</a></dd>

                </dl>
            </div>
            <div class="ebanner mt10">
                <img src="~/images/ebanner.png" width="261" height="125">
            </div>
        </div>
    </div>
    <div class="rec mt10">
        <ul class="clear">

            <li class="rlist"><a href="">
                <img src="~/images/rec3.png" width="200" height="105"></a></li>
            <li class="rlist"><a href="">
                <img src="~/images/rec1.png" width="200" height="105"></a></li>
            <li class="rlist"><a href="">
                <img src="~/images/rec2.png" width="200" height="105"></a></li>
            <li class="rlist"><a href="">
                <img src="~/images/rec3.png" width="200" height="105"></a></li>
        </ul>
    </div>

</div>
<!-- /.flat-slider -->


<section class="flat-imagebox style4">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="flat-row-title">
                    <h3>新品推荐</h3>
                </div>
            </div>
            <!-- /.col-md-12 -->
        </div>
        <!-- /.row -->
        <div class="row">
            <div class="col-md-12">
                <div class="owl-carousel-3">
                    @foreach (var item in ViewBag.bookinfo)
                    {
                        <div class="imagebox style4">
                            <div class="box-image">
                                <a href="~/ShopSingle/Single?id=@item.BookID" title="">
                                    <img src="images/Indexs/@item.Pic" alt="" style="height:110px;">
                               
                                </a>
                                <a href=""></a>
                            </div>
                            <!-- /.box-image -->
                            <div class="box-content">
                                <div class="cat-name">
                                    <a href="#" title="">@item.BookName</a>
                                </div>
                                <div class="product-name">
                                    <a href="#" title="" style="font-size: 12px;">@item.Author</a>
                                </div>
                                <div class="price">
                                    <span class="sale">@item.OriginalPrice</span>
                                    <span class="regular">@item.PresentPrice</span>
                                </div>
                            </div>
                            <!-- /.box-content -->
                        </div>
                    }

                    <!-- /.imagebox style4 -->
                </div>
                <!-- /.owl-carousel-3 -->
            </div>
            <!-- /.col-md-12 -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>
<div class="content">
    <div class="floor" id="f1">
        <div class="mt">
            <h2>主编推荐</h2>
            <ul class="tab clear">
                <li class="lihover"><a href="">主打</a><span></span></li>
                <li><a href="">童书</a><span></span></li>
                <li><a href="">青春</a><span></span></li>
                <li><a href="">小说</a></li>
            </ul>
        </div>
        <div class="mc clear">
            <div class="side">
                <div class="banner">
                    <a href="">
                        <img src="~/images/1fbanner.png" width="300"></a>
                    <i class="light"></i>
                </div>
                <ul class="theme clear">
                    <li class="fore1"><a href=""><i class="icon"></i><span>手机</span></a></li>
                    <li class="fore2"><a href=""><i class="icon"></i><span>大家电</span></a></li>
                    <li class="fore3"><a href=""><i class="icon"></i><span>家用电器</span></a></li>
                    <li class="fore4"><a href=""><i class="icon"></i><span>手机</span></a></li>
                </ul>
                <div class="words f1bg">
                    <ul class="assis clear">
                        <li><a href="">三星钜惠全家福<i></i></a></li>
                        <li><a href="">逛商城赚千元话费<i></i></a></li>
                        <li><a href="">移动电源品质联盟<i></i></a></li>
                        <li><a href="">手机月末大促<i></i></a></li>
                    </ul>
                    <ul class="category clear">
                        <li><a href="">电饭煲</a><a href="">数码</a></li>
                        <li><a href="">电磁炉</a><a href="">电饭煲</a></li>
                        <li><a href="">手机</a><a href="">电磁炉</a></li>
                        <li><a href="">数码</a><a href="">电磁炉</a></li>
                        <li><a href="">洗衣机</a><a href="">数码</a></li>
                        <li><a href="">冰箱</a><a href="">数码</a></li>
                        <li><a href="">挂烫机</a><a href="">数码</a></li>
                        <li><a href="">电磁炉</a><a href="">电饭煲</a></li>
                    </ul>
                </div>
            </div>
            <div class="main" style="height:600px;">
                 @* 主打 *@
                <ul class=" list clear">
                    @foreach (var item in ViewBag.bookinfo)
                    {
                        <li>  <a href="~/ShopSingle/Single?id=@item.BookID" title="">
                            <img src="~/images/Indexs/@item.Pic" width="150" height="150" style="margin-left:20%;"></a>
                            <p style="margin-left: 10px;">@item.BookName</p>
                            <p>@item.BookDesc</p>
                        </li>
                                  
                    }


                </ul>
                 @* 儿童 *@
                <ul>
                    @foreach (var item in ViewBag.bookinfos)
                    {
                        <li>  <a href="~/ShopSingle/Single?id=@item.BookID" title="">
                            <img src="images/Indexs/@item.Pic" width="150" height="150" style="margin-left:20%;"></a>

                            <p style="margin-left: 10px;">@item.BookName</p>
                            <p>@item.BookDesc</p>
                        </li>
                                  
                    }
                </ul>
               @* 青春 *@
                 <ul>
                  
                    @foreach (var item in ViewBag.bookinfoq)
                    {
                        <li>  <a href="~/ShopSingle/Single?id=@item.BookID" title="">
                            <img src="~/images/Indexs/@item.Pic" width="150" height="150" style="margin-left:20%;"></a>
                            <p style="margin-left: 10px;">@item.BookName</p>
                            <p>@item.BookDesc</p>
                        </li>
                                  
                    }
                </ul>
                 @* 小说 *@
                <ul>
                    @foreach (var item in ViewBag.bookinfot)
                    {
                        <li>  <a href="~/ShopSingle/Single?id=@item.BookID" title="">
                            <img src="~/images/Indexs/@item.Pic" width="150" height="150" style="margin-left:20%;"></a>
                            <p style="margin-left: 10px;">@item.BookName</p>
                            <p>@item.BookDesc</p>
                        </li>
                                  
                    }
                </ul>

            </div>
        </div>

    </div>
    <div class="floor" id="f2">
        <div class="mt">
            <h2>读者推荐</h2>
            <ul class="tab clear">
                <li class="lihover"><a href="">家庭教育</a><span></span></li>
                <li><a href="">社会科学</a><span></span></li>
                <li><a href="">经济管理</a><span></span></li>
                
            </ul>
        </div>
        <div class="mc clear">
      
            <div class="mains">
                <ul class=" list clear">
                    @foreach (var item in ViewBag.bookinfoj)
                    {
                        <li>  <a href="~/ShopSingle/Single?id=@item.BookID" title="">
                            <img src="~/images/Indexs/@item.Pic" width="150" height="150" style="margin-left:20%;"></a>
                            <p style="margin-left: 10px;">@item.BookName</p>
                            <p>@item.BookDesc</p>
                        </li>
                                  
                    }


                </ul>
                <ul class=" list clear">
                    @foreach (var item in ViewBag.bookinfok)
                    {
                        <li>  <a href="~/ShopSingle/Single?id=@item.BookID" title="">
                            <img src="~/images/Indexs/@item.Pic" width="150" height="150" style="margin-left:20%;"></a>
                            <p style="margin-left: 10px;">@item.BookName</p>
                            <p>@item.BookDesc</p>
                        </li>
                                  
                    }


                </ul>
                <ul class=" list clear">
                    @foreach (var item in ViewBag.bookinfog)
                    {
                        <li>  <a href="~/ShopSingle/Single?id=@item.BookID" title="">
                            <img src="~/images/Indexs/@item.Pic" width="150" height="150" style="margin-left:20%;"></a>
                            <p style="margin-left: 10px;">@item.BookName</p>
                            <p>@item.BookDesc</p>
                        </li>
                                  
                    }


                </ul>
               

            </div>
        </div>

    </div>
</div>
